<template>
    <view class="pages-home" v-if="isLoad">
        <!-- <back></back> -->
        <block v-if="configInfo.plugAuth.map">
            <fixed @height="initFixHeight" :zIndex="990">
                <uni-nav-bar
                    :fixed="false"
                    :shadow="false"
                    :statusBar="true"
                    title="技师"
                    color="#ffffff"
                    :backgroundColor="primaryColor"
                >
                </uni-nav-bar>
                <view class="fill-base" style="height: 196rpx">
                    <view class="map-info flex-between pd-lg">
                        <view @tap.stop="toChooseLocation" class="flex-y-center">
                            <i class="iconfont iconjuli mr-sm"></i>
                            <view class="f-mini-title c-title max-400 ellipsis">
                                {{
                                    location && location.address
                                        ? location.address
                                        : isLoad
                                        ? "定位失败"
                                        : "定位中..."
                                }}
                            </view>
                            <i class="iconfont icon-down"></i>
                        </view>
                        <view class="map-list-item flex-y-center">
                            <view
                                @tap.stop="toChangeItem('map')"
                                class="list-btn flex-center f-icontext rel"
                                :style="{
                                    color: mapType == 'map' ? primaryColor : '',
                                    borderColor: mapType == 'map' ? primaryColor : '',
                                    borderRight: mapType == 'list' ? 'none' : '',
                                }"
                            >
                                <view
                                    class="list-btn abs"
                                    :style="{ background: primaryColor }"
                                    v-if="mapType == 'map'"
                                >
                                </view>
                                <i class="iconfont icondituzhaoren2"></i>
                                地图
                            </view>
                            <view
                                @tap.stop="toChangeItem('list')"
                                class="list-btn flex-center f-icontext rel"
                                :style="{
                                    color: mapType == 'list' ? primaryColor : '',
                                    borderColor: mapType == 'list' ? primaryColor : '',
                                    borderLeft: mapType == 'map' ? 'none' : '',
                                }"
                            >
                                <view
                                    class="list-btn abs"
                                    :style="{ background: primaryColor }"
                                    v-if="mapType == 'list'"
                                >
                                </view>
                                <i class="iconfont iconliebiaomoshi2"></i>
                                列表
                            </view>
                        </view>
                    </view>

                    <view class="tab-info flex-center pr-lg">
                        <view class="tab-list-item">
                            <tab
                                @change="handerTabChange"
                                :list="service_cate"
                                :activeIndex="param.activeIndex * 1"
                                :activeColor="primaryColor"
                                height="80rpx"
                                fontSize="28rpx"
                                :numberType="2"
                                lineClass="sm"
                            >
                            </tab>
                        </view>
                        <view
                            @tap.stop="$refs.search_item.open()"
                            class="tab-select-item flex-1 flex-between ml-sm"
                        >
                            <view></view>
                            <i class="iconfont iconshaixuan"></i>
                        </view>
                    </view>
                </view>
            </fixed>
            <block v-if="mapType == 'map'">
                <map
                    class="map-box"
                    :style="{ height: `calc(100vh - ${popupHeight + configInfo.tabbarHeight}px)` }"
                    :controls="map.controls"
                    :scale="map.scale"
                    :latitude="map.latitude"
                    :longitude="map.longitude"
                    :markers="covers"
                    @callouttap="getDetail"
                    @markertap="getDetail"
                    @regionchange="regionchange"
                    v-if="location.lat && location.lng && location.address"
                ></map>
            </block>
            <block v-if="mapType == 'list'">
                <block v-if="list.data && list.data.length > 0">
                    <view class="mt-md ml-md mr-md" v-for="(item, index) in list.data" :key="index">
                        <technician-list-item
                            @comment="toShowPopup(index, 'message')"
                            @collect="toCollect(index)"
                            @order="toShowPopup(index, 'technician')"
                            :info="item"
                        >
                        </technician-list-item>
                    </view>
                    <!-- #ifdef H5 -->
                    <load-more
                        :noMore="list.current_page >= list.last_page && list.data.length > 0"
                        :loading="loading"
                        v-if="loading"
                    >
                    </load-more>
                    <abnor
                        v-if="!loading && list.data.length <= 0 && list.current_page == 1"
                    ></abnor>
                    <!-- #endif -->
                    <!-- #ifndef H5 -->
                    <load-more
                        :noMore="
                            list.current_page >= list.last_page &&
                            list.data.length > 0 &&
                            location.lng
                        "
                        :loading="loading"
                        v-if="loading"
                    >
                    </load-more>
                    <abnor
                        v-if="
                            !loading &&
                            list.data.length <= 0 &&
                            list.current_page == 1 &&
                            location.lng
                        "
                    ></abnor>
                    <abnor
                        @confirm="toOpenLocation"
                        :tip="[{ text: '定位失败，请开启地理位置授权后刷新页面重试~', color: 0 }]"
                        :button="[{ text: '开启定位', type: 'confirm' }]"
                        btnSize=""
                        v-if="!loading && !location.lng"
                    >
                    </abnor>
                    <!-- #endif -->

                    <view class="space-footer"></view>
                    <technician-list-popup ref="technician_list_popup"></technician-list-popup>
                </block>
            </block>
        </block>
        <block v-else>
            <abnor
                :tip="[{ text: '当前页面没有权限，请点击导航栏切换页面', color: 0 }]"
                image="https://lbqny.migugu.com/admin/anmo/technician/no_data.png"
            ></abnor>
        </block>

        <uni-popup ref="search_item" type="top" left="164rpx">
            <view class="search-popup pd-lg fill-base">
                <view class="f-desc c-title text-bold">{{ $t("action.attendantName") }}性别 </view>
                <view class="flex-warp">
                    <view
                        @tap.stop="toChangeItem('sex', index)"
                        class="list-item flex-center mt-md mr-md f-paragraph c-paragraph radius"
                        :style="{
                            background: check.sex == item.id ? primaryColor : '',
                            color: check.sex == item.id ? '#fff' : '',
                        }"
                        v-for="(item, index) in sexList"
                        :key="index"
                        >{{ item.title }}
                    </view>
                </view>
                <view class="f-desc c-title text-bold pt-lg mt-md">从业年份 </view>
                <view class="flex-warp">
                    <view
                        @tap.stop="toChangeItem('year', index)"
                        class="list-item flex-center mt-md mr-md f-paragraph c-paragraph radius"
                        :style="{
                            background: check.year == item.id ? primaryColor : '',
                            color: check.year == item.id ? '#fff' : '',
                        }"
                        v-for="(item, index) in yearList"
                        :key="index"
                        >{{ item.title }}
                    </view>
                </view>
                <view class="f-desc c-title text-bold pt-lg mt-md">上门时间 </view>
                <view
                    @tap.stop="toShowDate"
                    class="list-item flex-center mt-md mr-md f-paragraph c-paragraph radius rel"
                    style="width: 100%"
                >
                    {{ check.service_time || "选择期望上门时间" }}
                    <i
                        @tap.stop="toClearServiceTime"
                        class="iconfont icon-guanbi-fill abs"
                        :style="{ color: primaryColor }"
                        v-if="check.service_time"
                    ></i>
                </view>
                <view class="f-desc c-title text-bold pt-lg mt-md">个性筛选 </view>
                <input
                    type="text"
                    v-model="check.coach_name"
                    :placeholder="'请输入' + $t('action.attendantName') + '姓名'"
                    class="list-item text-center mt-md f-paragraph c-paragraph radius"
                    style="width: 100%"
                />
                <view style="height: 60rpx"></view>
                <view class="flex-center">
                    <view
                        @tap.stop="toReset"
                        class="search-btn flex-center f-mini-title c-title radius"
                        >重置</view
                    >
                    <view
                        @tap.stop="toConfirm"
                        class="search-btn flex-center ml-lg f-mini-title c-base radius"
                        :style="{ background: primaryColor, borderColor: primaryColor }"
                        >确定</view
                    >
                </view>
            </view>
        </uni-popup>

        <uni-popup ref="technician_info_item" type="center">
            <view class="technician-info-popup fill-base ml-lg mr-lg radius-16">
                <image
                    @tap.stop="goInfo"
                    mode="aspectFill"
                    class="work-img"
                    :src="detail.work_img"
                ></image>
                <view @tap.stop="goInfo" class="pt-lg pl-lg pr-lg">
                    <view class="flex-between">
                        <view class="f-title c-black text-bold max-400">{{
                            detail.coach_name || "-"
                        }}</view>
                        <view class="flex-center">
                            <i class="iconfont iconjuli" :style="{ color: primaryColor }"></i>
                            <view class="f-desc c-title">{{ detail.distance }}</view>
                        </view>
                    </view>
                    <view class="flex-y-center mt-sm">
                        <view class="service-label flex-center f-icontext">
                            {{ textType[detail.text_type] }}
                        </view>
                        <view
                            class="time-label flex-y-center ml-md f-icontext c-paragraph"
                            v-if="detail.near_time"
                        >
                            <view class="near-text flex-center">最早可约</view>
                            <view
                                class="near-time flex-center c-base rel"
                                :style="{ color: primaryColor }"
                            >
                                <view class="bg abs" :style="{ background: primaryColor }"></view>
                                {{ detail.near_time }}
                            </view>
                        </view>
                    </view>
                    <view
                        class="flex-y-center mt-lg f-icontext c-caption"
                        v-if="detail.store_id && detail.store_name"
                    >
                        <i class="iconfont icondianpu"></i>
                        {{ detail.store_name }}
                    </view>
                    <view
                        class="flex-y-center f-icontext c-caption"
                        :class="[
                            { 'mt-sm': detail.store_id && detail.store_name },
                            { 'mt-lg': !detail.store_id },
                        ]"
                    >
                        <view class="flex-y-baseline">
                            <i class="iconfont iconpingfen1 icon-font-color"></i>
                            <view class="star-text flex-y-center f-caption">{{
                                detail.star || 0
                            }}</view>
                        </view>
                        <view class="line"></view>
                        <view>已服务{{ detail.order_num || 0 }}单</view>
                        <view class="line"></view>
                        <view>从业{{ detail.work_time }}年</view>
                    </view>
                </view>
                <view class="pd-lg">
                    <view class="introduce-info pd-lg f-paragraph c-title radius-16">
                        <text decode="emsp" style="word-break: break-all">{{ detail.text }}</text>
                    </view>
                </view>
            </view>
            <view @tap.stop="$refs.technician_info_item.close()" class="flex-center mt-lg"
                ><i class="iconfont icon-close c-base"></i
            ></view>
        </uni-popup>

        <w-picker
            mode="date"
            :startYear="startYear - 100"
            :endYear="startYear"
            :value="toDay"
            :current="false"
            fields="minute"
            @confirm="onConfirm($event)"
            :disabled-after="false"
            ref="day"
            :themeColor="primaryColor"
            :visible.sync="showDate"
        >
        </w-picker>

        <view :style="{ height: `${configInfo.tabbarHeight}px` }"></view>
        <tabbar :cur="7"></tabbar>

        <!-- #ifdef APP-PLUS -->
        <login-info></login-info>
        <!-- #endif -->
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import siteInfo from "@/siteinfo.js";
import tabbar from "@/components/tabbar.vue";
import technicianListItem from "@/components/technician-list-item.vue";
import technicianListPopup from "@/components/technician-list-popup.vue";
import wPicker from "@/components/w-picker/w-picker.vue";
export default {
    components: {
        tabbar,
        technicianListItem,
        technicianListPopup,
        wPicker,
    },
    data() {
        return {
            isLoad: false,
            options: {},
            textType: {
                1: "可服务",
                2: "服务中",
                3: "可预约",
                4: "不可预约",
            },
            popupHeight: "",
            startYear: "",
            toDay: "",
            showDate: false,
            timer: null,
            detail: {},
            loading: true,
            lockTap: false,
        };
    },
    computed: mapState({
        pageActive: (state) => state.map.pageActive,
        sexList: (state) => state.map.sexList,
        yearList: (state) => state.map.yearList,
        check: (state) => state.map.check,
        param: (state) => state.map.param,
        service_cate: (state) => state.map.service_cate,
        mapList: (state) => state.map.mapList,
        list: (state) => state.map.list,
        mapType: (state) => state.map.mapType,
        map: (state) => state.map.map,
        covers: (state) => state.map.covers,
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
        configInfo: (state) => state.config.configInfo,
        autograph: (state) => state.user.autograph,
        userInfo: (state) => state.user.userInfo,
        location: (state) => state.user.location,
        isGzhLogin: (state) => state.user.isGzhLogin,
    }),
    async onLoad(options) {
        this.$util.showLoading();
        options = await this.updateCommonOptions(options);
        this.options = options;
        uni.onNetworkStatusChange((res) => {
            let { isConnected } = res;
            if (isConnected && !this.pageActive) {
                this.initIndex();
                return;
            }
        });
        await this.initIndex();
    },
    onUnload() {
        if (this.timer) clearTimeout(this.timer);
    },
    async onShow() {
        // #ifdef H5
        if (this.$jweixin.isWechat()) {
            await this.$jweixin.initJssdk();
            this.toAppShare();
        }
        // #endif
    },
    onPullDownRefresh() {
        // #ifndef APP-PLUS
        uni.showNavigationBarLoading();
        // #endif
        this.initRefresh();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.list.current_page >= this.list.last_page || this.loading) return;
        this.loading = true;
        this.getList(this.param.page + 1);
    },
    onShareAppMessage(e) {
        let { id: pid = 0 } = this.userInfo;
        let path = `/pages/map?pid=${pid}`;
        this.$util.log(path);
        return {
            title: "",
            imageUrl: "",
            path,
        };
    },
    methods: {
        ...mapActions([
            "getConfigInfo",
            "getUserInfo",
            "updateCommonOptions",
            "getMapIndex",
            "getMapList",
            "getMapCoachList",
        ]),
        ...mapMutations(["updateMapItem", "updateUserItem"]),
        async initIndex(refresh = false) {
            let { pid = 0 } = this.options;
            if (!refresh && this.pageActive && !pid) {
                this.isLoad = true;
                this.loading = false;
                this.$util.setNavigationBarColor({
                    bg: this.primaryColor,
                });
                this.$util.hideAll();
                return;
            }

            let { isGzhLogin } = this;
            let { id: uid = 0 } = this.userInfo;
            if (pid && !uid) {
                // #ifdef H5
                if (isGzhLogin) {
                    setTimeout(() => {
                        this.getUserInfo();
                    }, 1000);
                } else {
                    this.getUserInfo();
                }
                // #endif
                // #ifndef H5
                await this.getUserInfo();
                // #endif
            }

            if (
                !this.configInfo.id ||
                refresh ||
                (this.configInfo.id && !this.configInfo.plugAuth.hasOwnProperty("map"))
            ) {
                await this.getConfigInfo();
            }

            this.$util.setNavigationBarColor({
                bg: this.primaryColor,
            });
            let cur_time = new Date(Math.ceil(new Date().getTime()));
            this.startYear = this.$util.formatTime(cur_time, "YY");
            this.toDay = this.$util.formatTime(cur_time, "YY-M-D");

            let { map = false } = this.configInfo.plugAuth;
            if (!map) {
                this.isLoad = true;
                this.loading = false;
                this.$util.hideAll();
                return;
            }

            let { lng = 0, lat = 0 } = this.location;
            await this.getMapIndex();
            await this.getList(1);
            this.updateMapItem({
                key: "pageActive",
                val: true,
            });
            this.isLoad = true;
        },
        initRefresh() {
            this.initIndex(true);
        },
        handerTabChange(index) {
            console.log(this.service_cate, this.param);
            let { id: cate_id } = this.service_cate[index];
            let param = Object.assign({}, this.param, {
                cate_id,
                page: 1,
                activeIndex: index,
            });
            this.updateMapItem({
                key: "param",
                val: param,
            });
            this.getList();
        },
        async getList(flag) {
            if (flag) {
                this.param.page = 1;
                if (this.timer) clearTimeout(this.timer);
            }
            let { mapType } = this;

            let { lng = 0, lat = 0 } = this.location;
            let param = Object.assign({}, this.param, {
                lat,
                lng,
            });

            let { cate_id = 0 } = param;
            let ind = this.service_cate.findIndex((item) => {
                return item.id == cate_id;
            });
            ind = ind == -1 ? 0 : ind;
            cate_id = this.service_cate[ind].id;
            param.cate_id = cate_id;

            let params = Object.assign({}, this.param, {
                cate_id,
                activeIndex: ind,
            });
            this.updateMapItem({
                key: "param",
                val: params,
            });

            let arr = this.yearList.filter((item) => {
                return item.id == param.year;
            })[0].year;
            param.work_time_start = arr[0];
            param.work_time_end = arr[1];
            param.service_time = param.service_time
                ? this.$util.DateToUnix(param.service_time)
                : "";
            if (param.sex == -1) {
                delete param.sex;
            }
            if (this.mapType == "map") {
                delete param.page;
            }
            delete param.activeIndex;
            delete param.year;
            let methodModel = mapType == "map" ? "getMapList" : "getMapCoachList";
            await this[methodModel](param);
            this.$util.hideAll();
            this.loading = false;
            if (this.mapType == "map") {
                this.timer = setTimeout(() => {
                    this.getList(1);
                }, 600000);
            }
        },
        toAppShare() {
            let { id: pid = 0 } = this.userInfo;
            let title = "首页";
            let { siteroot } = siteInfo;
            let url = siteroot.split("/index.php")[0];
            let href = `${url}/h5/#/pages/service?pid=${pid}`;
            let imageUrl = "";
            this.$jweixin.wxReady(() => {
                this.$jweixin.showOptionMenu();
                this.$jweixin.shareAppMessage(title, "", href, imageUrl);
                this.$jweixin.shareTimelineMessage(title, href, imageUrl);
            });
        },
        initFixHeight(val) {
            this.popupHeight = val;
        },
        // 选择地区
        async toChooseLocation(e) {
            await this.$util.checkAuth({
                type: "userLocation",
            });
            let { lat: locaLat = "", lng: locaLng = "" } = this.location;
            let param = {};
            if (!locaLat && !locaLng) {
                // #ifdef H5
                if (this.$jweixin.isWechat()) {
                    this.$util.showLoading();
                    await this.$jweixin.wxReady2();
                    let { latitude, longitude } = await this.$jweixin.getWxLocation();
                    locaLat = latitude;
                    locaLng = longitude;
                }
                // #endif
                // #ifdef APP-PLUS
                let location = await this.$util.getBmapLocation();
                locaLat = location.lat;
                locaLng = location.lng;
                // #endif
            }

            // #ifndef MP-WEIXIN
            param = {
                latitude: locaLat,
                longitude: locaLng,
            };
            // #endif
            let [
                ,
                {
                    address = "",
                    longitude: lng,
                    latitude: lat,
                    province = "",
                    city = "",
                    district = "",
                },
            ] = await uni.chooseLocation(param);
            if (!lng) return;
            let location = {
                lng,
                lat,
                address,
                province,
                city,
                district,
            };
            this.updateUserItem({
                key: "location",
                val: location,
            });
            await this.getList(1);
        },
        toChangeItem(val, index) {
            if (["sex", "year"].includes(val)) {
                let { id } = this[`${val}List`][index];
                let params =
                    val == "sex"
                        ? {
                              sex: id,
                          }
                        : {
                              year: id,
                          };
                let checkVal = Object.assign({}, this.check, params);
                this.updateMapItem({
                    key: "check",
                    val: checkVal,
                });
                return;
            }
            this.updateMapItem({
                key: "mapType",
                val,
            });
            this.getList(1);
        },
        toClearServiceTime() {
            this.check.service_time = "";
        },
        toShowDate() {
            this.showDate = true;
        },
        async onConfirm(val) {
            let { result } = val;

            let cur = this.$util.formatTime(new Date().getTime(), "YY-M-D h:m");
            if (this.$util.DateToUnix(result) <= this.$util.DateToUnix(cur)) {
                this.$util.showToast({
                    title: `只能选择未来时间哦`,
                });
                return;
            }

            let checkVal = Object.assign({}, this.check, {
                service_time: result,
            });
            this.updateMapItem({
                key: "check",
                val: checkVal,
            });
        },
        toReset() {
            this.updateMapItem({
                key: "check",
                val: {
                    sex: -1,
                    year: 1,
                    coach_name: "",
                    service_time: "",
                },
            });
            this.toConfirm();
        },
        toConfirm() {
            let param = Object.assign({}, this.param, this.check);
            this.updateMapItem({
                key: "param",
                val: param,
            });
            this.getList(1);
            this.$refs.search_item.close();
        },
        async toShowPopup(index, key) {
            this.$refs.technician_list_popup.toShowPopup(this.list.data[index], key);
        },
        async toCollect(index) {
            let { id, is_collect, collect_num } = this.list.data[index];
            let methodModel = is_collect ? "delCollect" : "addCollect";
            await this.$api.mine[methodModel]({
                coach_id: id,
            });
            this.$util.showToast({
                title: is_collect ? "取消成功" : "收藏成功",
            });
            this.list.data[index].is_collect = is_collect == 1 ? 0 : 1;
            this.list.data[index].collect_num = is_collect == 1 ? collect_num - 1 : collect_num + 1;
        },
        // 当视野发生改变
        async regionchange(e) {
            // console.log('当视野发生改变', e);
            return;
            if (e.type == "end") {
                let { latitude: lat = 0, longitude: lng = 0 } = e.detail.centerLocation;
                if (lat && lng && lat !== this.location.lat && lng !== this.location.lng) {
                    if (this.lockTap) return;
                    this.lockTap = true;
                    let key = `${lat},${lng}`;
                    try {
                        let data = await this.$api.base.getMapInfo({
                            location: key,
                        });
                        let { status, result } = JSON.parse(data);
                        if (status == 0) {
                            let { address, address_component } = result;
                            let { province, city, district } = address_component;
                            this.updateUserItem({
                                key: "location",
                                val: {
                                    lng,
                                    lat,
                                    address,
                                    province,
                                    city,
                                    district,
                                },
                            });
                            this.getList();
                            this.lockTap = false;
                        }
                    } catch (e) {
                        this.lockTap = false;
                    }
                }
            }
        },
        async getDetail(e) {
            let { markerId } = e.detail;
            let { id, distance } = this.mapList[markerId];
            let data = await this.$api.service.coachInfo({
                id,
            });
            data.distance = distance;
            this.detail = data;
            this.$refs.technician_info_item.open();
        },
        // 技-师详情
        goInfo() {
            let { id } = this.detail;
            this.$refs.technician_info_item.close();
            this.$util.goUrl({
                url: `/user/pages/technician-info?id=${id}`,
            });
        },
    },
};
</script>

<style lang="scss">
.pages-home {
    .map-info {
        .iconjuli {
            font-size: 30rpx;
        }

        .icon-down {
            color: #868686;
        }

        .map-list-item {
            .list-btn {
                width: 92rpx;
                height: 46rpx;
                transform: rotateZ(360deg);
                border-radius: 4rpx 0 0 4rpx;
                border: 1rpx solid #dadfe3;

                .iconfont {
                    font-size: 22rpx;
                    margin-right: 4rpx;
                }
            }

            .list-btn:nth-child(2) {
                border-radius: 0 4rpx 4rpx 0;
            }

            .list-btn.abs {
                opacity: 0.3;
                border: none;
            }
        }
    }

    .tab-info {
        .tab-list-item {
            width: 90%;
        }

        .tab-select-item {
            height: 44rpx;
            box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.8);
        }
    }

    .map-box {
        width: 100%;
    }

    .search-popup {
        width: calc(100% - 164rpx);
        height: 100vh;

        .list-item {
            width: 160rpx;
            height: 70rpx;
            background: #f5f5f5;

            .icon-guanbi-fill.abs {
                top: -15rpx;
                right: 0;
                font-size: 50rpx;
            }
        }

        .list-item:nth-child(3n) {
            margin-right: 0;
        }

        .search-btn {
            width: 230rpx;
            height: 80rpx;
            border: 1rpx solid #c7c7c7;
            transform: rotateZ(360deg);
        }
    }

    .technician-info-popup {
        width: 690rpx;
        overflow: hidden;
        margin-top: 200rpx;

        .work-img {
            width: 100%;
            height: 390rpx;
        }

        .service-label {
            min-width: 88rpx;
            height: 32rpx;
            padding: 0 10rpx;
            color: #ebddb1;
            background: linear-gradient(270deg, #4c545a 0%, #282b34 100%);
            border-radius: 4rpx;
        }

        .time-label {
            .near-text {
                width: 100rpx;
                height: 33rpx;
                background: #f5f5f5;
                border-radius: 3rpx 0 0 3rpx;
            }

            .near-time {
                width: 66rpx;
                height: 33rpx;
                border-radius: 0 3rpx 3rpx 0;

                .bg {
                    opacity: 0.1;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 1;
                    border-radius: 0 3rpx 3rpx 0;
                }
            }
        }

        .icondianpu {
            margin-right: 6rpx;
        }

        .iconpingfen1 {
            font-size: 24rpx;
            background-image: -webkit-linear-gradient(270deg, #fad961 0%, #f76b1c 100%);
        }

        .star-text {
            height: 26rpx;
            color: #ff9519;
            margin-left: 6rpx;
        }

        .line {
            width: 1rpx;
            height: 11rpx;
            background: #979797;
            margin: 0 18rpx;
        }

        .introduce-info {
            width: 630rpx;
            max-height: 400rpx;
            overflow-y: auto;
            background: #f9f9f9;
        }
    }

    .icon-close {
        font-size: 60rpx;
    }
}
</style>
